import 'package:flutter/material.dart';
import 'package:learn_flutter/lesson7/pages/image_detail.dart';
import 'pages/modal_page.dart';

main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.teal, cardColor: Colors.orange),
      debugShowCheckedModeBanner: false,
      home: HYHomePage(),
    );
  }
}

class HYHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
            child: GridView(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 8,
            mainAxisSpacing: 8,
            childAspectRatio: 16 / 9,
          ),
          children: List.generate(20, (index) {
            final imageUrl = 'https://picsum.photos/500/500?random=$index';
            return GestureDetector(
              child: Hero(
                tag: imageUrl,
                child: Image.network(
                  imageUrl,
                  fit: BoxFit.cover,
                ),
              ),
              onTap: () {
                Navigator.of(context)
                    .push(PageRouteBuilder(pageBuilder: (ctx, anim1, anim2) {
                  return FadeTransition(
                      opacity: anim1, child: HYImageDetailPage(imageUrl));
                }));
              },
            );
          }),
        )),
        backgroundColor: Colors.white,
        floatingActionButton: FloatingActionButton(
            child: Icon(Icons.pool),
            backgroundColor: Colors.teal,
            onPressed: () {
              // IOS -> Modal方式
              // Navigator.of(context).push(MaterialPageRoute(
              //     builder: (ctx) {
              //       return HYMoodalPage();
              //     },
              //     fullscreenDialog: true));

              Navigator.of(context).push(PageRouteBuilder(
                  transitionDuration: Duration(seconds: 2),
                  pageBuilder: (ctx, anmation1, anmation2) {
                    return FadeTransition(
                        opacity: anmation1, child: HYMoodalPage());
                  }));
            }),
        floatingActionButtonLocation: FloatingActionButtonLocation.endFloat);
  }
}
